<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
  	<link rel="stylesheet" type="text/css" href="../css/goods/query.css"/>
  	<link rel="stylesheet" type="text/css" href="../css/iconfont-query/iconfont.css"/>
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style>
        html,
        body,
        .mui-content {
            background-color: #ffffff;
        }

        .ptsp_top_stats {
            height: 20px;
            width: 100%;
            background-color: #ffffff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
        }

        .mui-action-back {
            height: 44px;
            width: 44px;
        }

        .mui-action-back img {
            width: 100%;
        }

       

        .mui-content {
            padding-bottom: 100px;
            padding-top: 44px !important;
        }

        .arr_left {
            background-image: url(../images/ptsp/left_arr_03.png);
            background-size: 24px 24px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .mui-title {
            font-size: 0.768rem;
        }

        .mui-bar-nav a {
            font-size: 0.5973rem;
            color: #888888;
            line-height: 44px;
        }
        
        html,body,.mui-content{
        	height: 100%;
        }
				.panel{
					background-color: #f1f1f1 !important;
				}
				.weather_res{
					background-color: #1c83fc ;
				}
				
  
    </style>
</head>

<body class="bg_blue">
   
    <header class=" bg_blue mui-bar mui-bar-nav" style="border:none;">
        <a class="mui-action-back mui-icon  mui-pull-left arr_left">
        </a>
        <h1 class="mui-title" style="color: #fff;">天气</h1>
        <!-- <a class="mui-pull-right" onclick = "buy_car.is_show_del(this)">管理</a> -->
    </header>
    <div class="mui-content bg_blue">
			
        <div class="weather_res">
					
        	<div class="top_panel panel">
        		<div class="date">{{today.date_y}} {{today.week}} </div>
        		<div class="icon_img">
        			<img :src="'../images/query/day/'+today.weather_id.fa+'.png'"/>
        		</div>
        		<div class="temp">{{today.temperature}}
        			<div class="address">{{today.city}}</div>
        		</div>
        		<div class="bottom">{{today.weather}} | {{today.wash_index}} | {{today.dressing_index}}</div>
        	</div>
        	
					
        	<div class=" panel" v-for="(i,k) in future" >
        		<div class="icon_img2">
        			<img :src="'../images/query/day/'+i.weather_id.fa+'.png'"/>
        		</div>
        		<div class="right_info">
        			<span class="week">{{i.week}}</span>
        			<span>{{i.temperature}}</span>
        		</div>
        		
        	</div>
      
        	 
        </div>
    </div>
</body>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
	  
	 var city = localStorage.getItem("query_weather_city");
	 var app = new Vue({
		 el:'.mui-content',
		 data:{
			 today:'',
			 sk:'',
			 future:'',
		 },
		 created:function(){
			 var that = this;
			 $.ajax({
				 url:'https://zhapp.4hl.cn/app/Address/tianqi',
				 type:'post',
				 data:{
					 cityname:city,
					 format:'2',
					 dtype:'json'
				 },
				 success:function(res){
					
						res = $.trim(res);
						console.log(res);
						if(res.indexOf("查询不到该城市的信息")>0){
							mui.toast("查询不到该城市的信息");
							return
						}
					 if(res){
						 res = JSON.parse(res)
					 }
						that.today = res.today;
						that.sk = res.sk;
						that.future = res.future;
				 },
				 error:function(err){
					 mui.toast("服务器错误")
				 }
			 })
		 }
	 })
	
</script>
</html>